<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米商业信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
</head>

<body style="background:#fff">

<div id="wrapper">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>物流支出明细</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a>财务管理</a>
                </li>
                <li class="active">
                    <a href="#"><strong>支出管理</strong></a>
                </li>
            </ol>
        </div>
    </div>
    <!-- 头部明细 -->
    <div class="row">
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">26日</span>
                    <h5>今日支出（元）</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">￥386,200</h1>
                    <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">五月</span>
                    <h5>本月支出（元）</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">￥80,800</h1>
                    <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
                </div>
            </div>
        </div>
        <!-- 详细信息 -->
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>详细支出</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover no-margins">
                        <thead>
                        <tr>
                            <td>支出类型</td>
                            <td>总计金额（元）</td>
                            <td>月份</td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><a href="goods_finance.html">进货费用</a></td>
                            <td>5000,00</td>
                            <td>5月</td>
                        </tr>
                        <tr>
                            <td><a href="repertory_finance.html">仓库费用</a></td>
                            <td>4000,00</td>
                            <td>5月</td>
                        </tr>
                        <tr>
                            <td><a href="car_finance.html">车辆费用</a></td>
                            <td>360,00</td>
                            <td>5月</td>
                        </tr>
                        <tr>
                            <td><a href="others_finance.html">其他费用</a></td>
                            <td>11001</td>
                            <td>5月</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部明细结束 -->

    <div class="row">
        <div class="col-lg-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1">图形</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-2"> 列表</a></li>
                </ul>
                <div class="tab-content">
                    <!-- 图形展示 -->
                    <div id="tab-1" class="tab-pane active">
                        <div class="col-lg-6">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>支出占比</h5>
                                    <div ibox-tools></div>
                                </div>
                                <div class="ibox-content">
                                    <div>
                                        <canvas id="doughnutChart" height="140"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 列表展示 -->
                    <div id="tab-2" class="tab-pane ">
                        <div class="panel-body">
                            <!-- 支出额列表 -->
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>支出单 </h5>
                                            <div class="ibox-tools">
                                                <a class="collapse-link">
                                                    <i class="fa fa-chevron-up"></i>
                                                </a>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                    <i class="fa fa-wrench"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-user">
                                                    <li><a href="#">Config option 1</a>
                                                    </li>
                                                    <li><a href="#">Config option 2</a>
                                                    </li>
                                                </ul>
                                                <a class="close-link">
                                                    <i class="fa fa-times"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="ibox-content">
                                            <div class="row">
                                                <div class="col-sm-2 m-b-xs"><select
                                                        class="input-sm form-control input-s-sm inline">
                                                    <option value="0">进货单</option>
                                                    <option value="1">运费单</option>
                                                    <option value="2">工资单</option>
                                                    <option value="3">其他支出单</option>
                                                </select>
                                                </div>
                                                <div class="col-sm-4 m-b-xs">
                                                    <div data-toggle="buttons" class="btn-group">
                                                        <label class="btn btn-sm btn-white"> <input type="radio"
                                                                                                    id="option1"
                                                                                                    name="options"> 日
                                                        </label>
                                                        <label class="btn btn-sm btn-white active"> <input type="radio"
                                                                                                           id="option2"
                                                                                                           name="options">
                                                            周 </label>
                                                        <label class="btn btn-sm btn-white"> <input type="radio"
                                                                                                    id="option3"
                                                                                                    name="options"> 月
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-sm-2 m-b-xs">
                                                    <div class="form-group" id="startDate">
                                                        <div class="input-group date">
                                                            <span class="input-group-addon"><i
                                                                    class="fa fa-calendar"></i></span><input type="text"
                                                                                                             class="form-control"
                                                                                                             value="03/04/2017">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-2 m-b-xs">
                                                    <div class="form-group" id="endDate">

                                                        <div class="input-group date">
                                                            <span class="input-group-addon"><i
                                                                    class="fa fa-calendar"></i></span><input type="text"
                                                                                                             class="form-control"
                                                                                                             value="03/04/2017">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-2">
                                                    <div class="input-group"><input type="text" placeholder="Search"
                                                                                    class="input-sm form-control"> <span
                                                            class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span></div>
                                                </div>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>单据编号</th>
                                                        <th>单据日期</th>
                                                        <th>经手人</th>
                                                        <th>支出金额（元）</th>
                                                        <th>状态</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Project
                                                            <small>This is example of project</small>
                                                        </td>
                                                        <td><span class="pie">0.52/1.561</span></td>
                                                        <td>20%</td>
                                                        <td>Jul 14, 2013</td>
                                                        <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>Alpha project</td>
                                                        <td><span class="pie">6,9</span></td>
                                                        <td>40%</td>
                                                        <td>Jul 16, 2013</td>
                                                        <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Betha project</td>
                                                        <td><span class="pie">3,1</span></td>
                                                        <td>75%</td>
                                                        <td>Jul 18, 2013</td>
                                                        <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Gamma project</td>
                                                        <td><span class="pie">4,9</span></td>
                                                        <td>18%</td>
                                                        <td>Jul 22, 2013</td>
                                                        <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td>总计：50000</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Peity -->
<script src="../js/plugins/peity/jquery.peity.min.js"></script>
<script src="../js/plugins/chartJs/Chart.min.js"></script>
<!--<script src="../js/demo/chartjs-demo.js"></script>-->

<!-- Custom and plugin javascript -->
<script src="../js/inspinia.js"></script>
<script src="../js/plugins/pace/pace.min.js"></script>

<!-- iCheck -->
<script src="../js/plugins/iCheck/icheck.min.js"></script>


<!-- 日期插件 -->
<script src="../js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script>

    //开始日期
    $('#startDate .input-group.date').datepicker({
        language: "cn",
        todayBtn: "linked",
        todayHighlight: true,
        keyboardNavigation: false,
        format: "yyyy-MM-dd",
        pickerPosition: "bottom-right",
        autoclose: true
    });
    //结束日期
    $('#endDate .input-group.date').datepicker({
        language: "cn",
        todayBtn: "linked",
        todayHighlight: true,
        keyboardNavigation: false,
        format: "yyyy-MM-dd",
        pickerPosition: "bottom-right",
        autoclose: true
    });
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });


    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
    var doughnutData = [
        {
            value: 300,
            color: "#a3e1d4",
            highlight: "#1ab394",
            label: "App"
        },
        {
            value: 50,
            color: "#dedede",
            highlight: "#1ab394",
            label: "Software"
        },
        {
            value: 100,
            color: "#b5b8cf",
            highlight: "#1ab394",
            label: "Laptop"
        }
    ];
    var doughnutOptions = {
        segmentShowStroke: true,
        segmentStrokeColor: "#fff",
        segmentStrokeWidth: 2,
        percentageInnerCutout: 45, // This is 0 for Pie charts
        animationSteps: 100,
        animationEasing: "easeOutBounce",
        animateRotate: true,
        animateScale: false,
        responsive: true,
    };
    var ctx = document.getElementById("doughnutChart").getContext("2d");
    var myNewChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);

    //    $('#data_3 .input-group.date').datepicker({
    //        startView: 2,
    //        todayBtn: "linked",
    //        keyboardNavigation: false,
    //        forceParse: false,
    //        autoclose: true
    //    });
</script>

</body>

</html>